<template lang="html">
	<div class="classification_box">
		<div class="classification_banner">
			<a href="cuxiao.html">
				<img src="https://ss3.bdstatic.com/lPoZeXSm1A5BphGlnYG/skin_plus/210.jpg" class="classification_img">
			</a>
		</div>
		<div class="classification_mian">
			<ul class="classification_mian_box">
				<li v-for="(item, index) in classshuju">
					<a :href="'cuxiao.html?type='+item.type">
						<p>{{item.name}}</p>
						<img :src="item.imgulr" :alt="item.name">
					</a>
				</li>
			</ul>
		</div>
	</div>
</template>
<script type="text/javascript">
	export default {
	  name: 'Signin',
	  data(){
	  	return{
	  		classshuju:[
	  			{name:"茶叶",imgulr:"https://ss1.bdstatic.com/kvoZeXSm1A5BphGlnYG/skin_plus/120.jpg",type:"chaye"},
	  			{name:"红酒",imgulr:"https://ss1.bdstatic.com/kvoZeXSm1A5BphGlnYG/skin_plus/120.jpg",type:"hongju"},
	  			{name:"精品",imgulr:"https://ss1.bdstatic.com/kvoZeXSm1A5BphGlnYG/skin_plus/120.jpg",type:"jingpin"}
	  		]
	  	}
	  },
	  methods:{
	    
	  },
	  components:{

	  }
	}
</script>
<style type="text/css" lang="less">
	@import '../../../assets/less/index.less';
	.classification_box{
		.classification_banner{
			height: 37.33vw;
			width: 100vw;
		}
		.classification_mian{
			width: 100vw;
			border-bottom: solid 2vw @colcr4;
			.classification_mian_box{
				width:@width; 
				margin: 0 auto;
				li{
					width: 33.3%;
					height: 34.6666vw;
					display: inline-block;
					position: relative;
					p,img{
						position: absolute;
					}
					a{
						display: inline-block;
						width: 100%;
						height: 100%;
						overflow: hidden;
					}
					p{
						top: 2vw;
						left: 2vw;
						width: 12.6vw;
						height: 6vw;
						line-height: 6vw;
						background-color: @color;
						font-size: @h3_font_size;
						color: @color1;
						z-index: 1;
						border-radius: 0.5vw;
					}
					img{
						top: 5vw;
						left: 2vw;
						width: 30vw;
						height: 25vw;
					}
				}
			}
		}
	}
</style>